<template>

    <el-table
            :data="tableData"
            border
            style="width: 100%">
        <el-table-column
                fixed
                prop="id"
                label="水果ID"
                width="150">
        </el-table-column>
        <el-table-column
                prop="name"
                label="水果名称"
                width="160">
        </el-table-column>
        <el-table-column
                prop="sale"
                label="水果销量"
                width="160">
        </el-table-column>
        <el-table-column
                prop="icon"
                label="图片"
                width="160">
            <template slot-scope="scope">
                <img :src="scope.row.icon" style="height: 70px"/>
            </template>
        </el-table-column>

        <el-table-column
                label="操作"
                width="250">
            <template slot-scope="scope">
                <el-button @click="fruitAdd" type="text" size="small">添加</el-button>
                <el-button @click="findFruit(scope.row)" type="text" size="small">修改</el-button>
                <el-button @click="fruitDelete(scope.row)" type="text" size="small">删除</el-button>
                <el-button @click="fruitBar" type="text" size="small">柱状图</el-button>
                <el-button @click="fruitPie" type="text" size="small">饼图</el-button>
            </template>
        </el-table-column>
    </el-table>
</template>

<script>
    export default {
        methods: {
            fruitAdd(){
                this.$router.push('/add')
            },

            findFruit(row){
                this.$router.push('/edit?id='+row.id)
            },
            fruitBar(){
                this.$router.push('/bar')
            },
            fruitPie(){
                this.$router.push('/pie')
            },



            fruitDelete(row) {

                    let _this = this

                    this.$confirm('尊贵的'+_this.admin.username+'是否确定要删除'+row.name+'？', '删除数据', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {

                        axios.delete('http://localhost:8181/fruit/delete/'+row.id).then( (res)=> {
                            if(res.data){
                                _this.$alert(row.name+'删除成功！', '删除数据', {
                                    confirmButtonText: '确定',
                                    callback: action => {
                                        //跳转到/table
                                        location.reload()
                                    }
                                });
                            }
                        })

                    }).catch(() => {

                    });

                }

                    },





        created(){
            // const _this= this;
                axios.get('http://localhost:8181/fruit/list').then((res)=>{
                    this.tableData = res.data;
                })
                this.admin = JSON.parse(localStorage.getItem('access-admin')); //把字符串还原成json对象

        },

        data() {
            return {
                tableData: [
                    {

                    }
                ],
                admin:''
            }
        }
    }
</script>